<template>
  <div @click.self="closeOnClickModal && close(false)" class="afast-dialog"
    :class="[isShow ? 'show' : null, showEffect ? '__show' : null]">
    <div :style="{ borderRadius: `${radius}px` }" class="afast-dialog-bar">
      <slot></slot>
      <div class="afast-dialog-footer">
        <slot name="footer"></slot>
      </div>
      <CloseButton icon="close" v-if="showClose" @click="close(false)" :size="25" class="afast-dialog-close-button">
      </CloseButton>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import CloseButton from "./CloseButton.vue";
const emit = defineEmits(["close"]);
withDefaults(defineProps<{
  radius?: number;
  showClose?: boolean;
  closeOnClickModal?: boolean;
}>(), {
  closeOnClickModal: true
})
const onClose = ref<(payload: any) => void>();
const isShow = ref(false);
const showEffect = ref(false);
const close = (payload: any) => {
  showEffect.value = false;
  setTimeout(() => {
    isShow.value = false;
  }, 300);
  if (onClose.value) onClose.value(payload);
  emit("close", payload);
};

defineExpose({
  show: (listener: DialogListner) => {
    isShow.value = true;
    setTimeout(() => {
      showEffect.value = true;
    }, 100);
    if (listener) {
      if (listener.onShow) listener.onShow();
      if (listener.onClose) onClose.value = listener.onClose;
    }
  },
  close,
});
</script>
<style lang="less">
.afast-dialog {
  position: fixed;
  z-index: 10000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(100, 100, 100, 0.5);
  align-items: center;
  justify-content: center;
  opacity: 0;
  display: none;
  transition: 0.3s;

  .afast-dialog-bar {
    min-width: 450px;
    min-height: 150px;
    background: white;
    padding: 10px;
    box-sizing: border-box;
    transform: translateY(0);
    position: relative;
    transition: 0.3s;

    .afast-dialog-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 20px;
    }

    .afast-dialog-close-button {
      position: absolute;
      top: 5px;
      right: 5px;
    }
  }
}

.afast-dialog.__show {
  opacity: 1;
  transition: 0.3s;

  .afast-dialog-bar {
    transform: translateY(20px);
  }
}

.afast-dialog.show {
  display: flex;
}
</style>
